<template>
	<view>
		<!-- 顶部 S -->
		<view class="tp-h88 level_align nanbar-box" :style="{top: statusBarHeight  +'px'}">
			<view class="center_combo tp-h100" style="width: 60rpx;" v-if="isRoutes">
				<uni-icons class="" type="arrowleft" size="24" color="#fff" @click="pageBack"></uni-icons>
			</view>
			<view class="center_combo tp-h100 tp-ml20" style="width: 60rpx;" v-else>
				<uni-icons class="" type="home" size="24" color="#fff" @click="pageJumps('/pages/tabbar/home', true)"></uni-icons>
			</view>
		</view>
		<!-- 顶部 E -->
		<!-- 收藏分享 S -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="share-box level_align" :style="{top:statusBarHeight + 44 +'px' }">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="share-box level_align" :style="{top:statusBarHeight + 44 +'px' }">
				<!-- #endif -->
				<view class=" tp-mr20" @click="collect">
					<image class="tp-img64" v-if="info.isCollect == 1" src="../static/icon/shou0.png" mode=""></image>
					<image class="tp-img64" v-else src="../static/icon/shou1.png" mode=""></image>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="">
					<button class="sharebutton" type="default" open-type="share">
						<image class="tp-img64" src="../static/icon/fenxiang1.png" mode=""></image>
					</button>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
		</view>
		<!-- #endif -->
		<!-- 收藏分享 E -->
		<!-- 图片轮播 S -->
		<view class="img_swiper_box">
			<swiper @change="change" class="swiper" circular autoplay="true" interval="3000" duration="500">
				<swiper-item class="tp-w100 tp-h100" v-for="(item,index) in swpList" :key="index" @click="previewImg(item,swpList)">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<swiper-dot class="dot" :current="current" :list="swpList"></swiper-dot>
		</view>
		<!-- 图片轮播 E -->
		<!-- 酒店信息 S -->
		<view class="hotel-info tp-pd30 tp-bgf tp-pr tp-mb2">
			<view class="level_align flex_between">
				<text class="tp-fz32 tp-fc333 tp-fw600 ellispsis1 flex-1">{{info.hotelName || '--'}}</text>
				<text class="tp-yellow tp-fz30">{{info.hotelLevel || '--'}} | {{info.hotelScore || '--'}}分</text>
			</view>
			<view class="ellispsis1 tp-fc tp-mt10"><text v-for="(ite,ind) in info.salePoints" :key="ind">{{ '#' + ite + ' '}}
				</text></view>
			<view class="level_align tp-mt20 flex_between">
				<view class="level_align flex-1 tp-mr20" @click="goToMap">
					<image class="tp-img28 tp-mr15" src="../static/icon/position1.png" mode=""></image>
					<text class="ellispsis1 flex-1">{{info.hotelLocation || '--'}}</text>
				</view>
				<text class="tp-fc999">距您{{info.distance || '--'}}km</text>
			</view>
			<view class="level_align flex_between" v-if="info.couponLabelList && info.couponLabelList.length" @click="openCoupon">
				<view class="tp-mt20 level_align flex-1 tp-ofh tp-mr20">
					<view class="quan-tag tp-wsn tp-lh44 tp-mr20 tp-red  tp-fz26" v-for="(item,index) in info.couponLabelList" :key="index">
						{{item}}
					</view>
				</view>
				<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 酒店信息 E -->

		<!-- 房间信息 S -->
		<view class="room-info tp-bgf tp-pd30">
			<view class="level_align flex_between">
				<view class="level_align flex_between tp-fc333">
					<view class="tp-fz32 tp-fw600 tp-mr20" @click="pageJumps('/pages/others/calendar?sts=go&durationDay=100800')">{{choosedDateObj.go || today}}</view>
					<view class="tp-fz26">入住</view>
				</view>
				<view class="tp-fc333 tp-fz24 tp-lh44 tp-ptb0lr20 tp-br40" style="background: #EBF9FF;">{{severalDays}} 晚</view>
				<view class="level_align flex_between tp-fc333">
					<view class="tp-fz32 tp-fw600 tp-mr20" @click="pageJumps('/pages/others/calendar?sts=back&durationDay=100800')">{{choosedDateObj.back || tomorrow}}</view>
					<view class="tp-fz26">离店</view>
				</view>
			</view>
			<!-- 房间标签 S 暂时不要 -->
			<!-- <view class="level_align flex_wrap" v-if="false">
				<view class="label-tag tp-wsn tp-lh44 tp-mt20 tp-mr20 tp-fc666 tp-bcF5  tp-fz26" v-for="(item,index) in labelList"
				 :key="index">
					{{item}}
				</view>
			</view> -->
			<!-- 房间标签 E 暂时不要 -->

			<view class="level_align flex_between tp-mt30" v-for="(item,index) in roomList" :key="index">
				<view class="flex flex-1" @click="openRoomPoupup(item.id)">
					<image class="room-img tp-br12 tp-mr20" :src="wwwImgUrl + item.roomCover" mode="aspectFill"></image>
					<view class="flex flex_column flex-1 flex_between tp-ofh" style="height: 124rpx;">
						<view class="tp-fc333 tp-fz28 ellispsis1">
							{{item.roomName}}
						</view>
						<view class="flex tp-mr20 tp-ofh tp-fc666 ellispsis1 tp-ofh">
							<text class="tp-mr15 tp-wsn" v-for="(itm,ind) in item.roomLabel" :key="ind">{{itm}}</text>
						</view>
						<view class="level_align tp-fz24 tp-fc666">
							<view class="tp-mr20 tp-red">￥ <text class="tp-fz36 tp-fw600">{{item.currentPrice}}</text></view>
							<text class="tp-mr20 tp-tdlt">￥{{item.originalPrice}}</text>
							<view class="tp-fz22 tp-bcF5" @click.stop="openPriceHint(item)" style="padding: 0 6rpx;"> <text class="tp-mr10">已减{{item.discounts}}</text>
								<uni-icons type="help" size="14" color="#FFAF3C"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<view class="ding column_align tp-ptb0lr20 tp-red tp-br12" @click="handeSubmitOrder(item)">
					<text class="tp-fz30  tp-lh64 tp-fw600">订</text>
					<text class="tp-lh44 tp-mb2">在线付</text>
				</view>
			</view>
		</view>
		<!-- 房间信息 E -->

		<!-- 评价 S -->
		<view class="evaluate-box tp-bgf tp-mt20" v-if="evaluateList.length">
			<!-- 标题块 S -->
			<view class="tp-bgf level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore?pageName=hotel&id='+ id)">
				<view class="level_align tp-fc333 tp-fz32 tp-fw600">
					<view class="tp-mr20 lan-line"></view>
					<text>用户评价</text>
				</view>
				<view class="flex-1 level_align flex_end tp-fz24 tp-fc999">
					<view class="flex-1 tp-tr tp-mr15">
						<input type="text" disabled placeholder="查看更多" />
					</view>
					<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!-- 标题块 E -->
			<view class="level_align flex_wrap tp-ptb0lr30 tp-mb20">
				<view class="label-tag tp-dib tp-wsn tp-ptb0lr20 tp-br40 tp-lh54 tp-mt20 tp-mr20 tp-fc666 tp-bcF5  tp-fz26" style="background: #FEEDEC;"
				 v-for="(item,index) in evaluateLabelList" :key="index">
					{{item.label}}({{item.value}})
				</view>
			</view>

			<view class="tp-ptb0lr30  tp-pb20 tp-bgf" v-for="(item,index) in evaluateList" :key="index">
				<!-- 头部信息栏 -->
				<view class="level_align flex_between">
					<view class="level_align">
						<image class="tp-img64 tp-mr20 tp-br40" :src="item.customerAvatar" mode=""></image>
						<view class="flex flex_column flex_between">
							<view class="tp-lh44 tp-fc333 tp-fz26">
								{{item.customerName}}
							</view>
							<view class="tp-lh40 tp-fc666">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="tp-yellow tp-fz30 tp-fw600">
						{{item.score || 5}}分
					</view>
				</view>
				<!-- 内容 -->
				<view class="tp-mt20 tp-mt10">
					<view class="tp-fz26 tp-fc333 tp-lh44">
						{{item.content}}
					</view>
					<view class="level_align tp-mt20 flex_wrap">
						<view class="tp-mb20" v-for="(urlItm, ind) in item.imgsList" :index="ind" :key="ind" @click="previewImg(urlItm,item.imgsList)"
						 :style="{marginRight:(ind+1)%4 == 0 ?'0':'35.3rpx'}">
							<image class="imgs tp-br8" :src="urlItm" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 E -->

		<!-- 领取优惠券的弹框 S -->
		<uni-popup id="couponPopup" ref="couponPopup" type="bottom" :animation="false">
			<view class="popup-coupon tp-bgf ">
				<view class="tp-h98 tp-fc333 tp-ls4 tp-fz30 center_combo tp-pr">
					优惠券
					<uni-icons @click="closeCoupon" class="close-icon" type="close" size="24" color="#999"></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="tp-ptb0lr30">
						<view class="coupon-list tp-mb20 level_align tp-pr" v-for="(item,index) in hotelCouponList" :key="index">
							<view class="left-coupon column_align flex_around tp-fcF tp-bbox">
								<view class="flex align_baseline tp-fz32">
									￥<text style="font-size: 48rpx;">{{item.amount}}</text>
								</view>
								<view class="tp-fz24" v-if="item.isTake == 0">
									已领取
								</view>
								<view v-else @click="takeCoupon(item.hotelCouponId)" class="tp-fz24 tp-border1 tp-bbox tp-ptb0lr30 tp-lh44 tp-br40"
								 style="border-color: #fff;">
									立即领取
								</view>
							</view>
							<view class="tp-h100 flex flex_column flex_center tp-pd30 tp-bbox flex-1">
								<view class="tp-fc333 tp-fz28">
									{{item.couponName}}
								</view>
								<view class="tp-fz22 tp-fc666 tp-mt20">
									有效期：{{item.beginTime}} — {{item.endTime}}
								</view>
								<image v-if="item.isTake == 0" class="watermark-img" src="../static/icon/watermark.png" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="tp-h88 tp-bgf"> </view>
			</view>
		</uni-popup>
		<!-- 领取优惠券的弹框 E -->

		<!-- 优惠说明弹框 S -->
		<uni-popup id="priceHintPopup" ref="priceHintPopup" type="bottom" :animation="false">
			<view class="popup-coupon tp-bgf ">
				<view class="tp-h98 tp-fc333 tp-ls4 tp-fz30 center_combo tp-pr">
					每晚每间优惠说明
					<uni-icons @click="closePriceHint" class="close-icon" type="close" size="24" color="#999"></uni-icons>
				</view>
				<view class="tp-ptb0lr30 tp-fz30 tp-fc333 tp-bgf">
					<view class="level_align flex_between tp-bdbm tp-h98">
						<text>原价</text>
						<text>￥{{lookRoom.originalPrice}}</text>
					</view>
					<view class="level_align flex_between tp-bdbm tp-h98">
						<text>天天特价优惠</text>
						<text>-￥{{lookRoom.discounts}}</text>
					</view>
					<view class="level_align flex_end tp-fz24 tp-h98 tp-red">
						￥<text class="tp-fz36  tp-fw600">{{lookRoom.currentPrice}}</text>
					</view>
				</view>
				<view class="tp-pd30">
					<view @click="handeSubmitOrder(lookRoom)" class="tp-br12 tp-bc tp-fcF tp-ls4 center_combo tp-fw600 tp-fz32 tp-h88">
						去预定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 优惠说明弹框 E -->

		<!-- 房型弹窗 S -->
		<uni-popup id="roomPopup" ref="roomPopup" type="bottom" :animation="false">
			<view class="popup-coupon tp-bgf ">
				<view class="tp-h98 tp-fc333 tp-ls4 tp-fz30 center_combo tp-pr" style="padding-left: 30rpx;">
					{{roomInfo.roomName}}
					<uni-icons @click="closeRoomPoupup" class="close-icon" type="close" size="24" color="#999"></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<!-- <view> -->
					<view class="tp-ptb0lr30 tp-fz30 tp-fc333 tp-bgf">
						<!-- 图片轮播 S -->
						<view class="tp-pr" style="height: 380rpx;">
							<swiper @change="change" class="swiper" circular autoplay="true" interval="2000" duration="500">
								<swiper-item class="tp-w100 tp-h100" v-for="(item,index) in roomBanners" :key="index" @click="previewImg(item,roomBanners)">
									<view class="swiper-item">
										<image :src="item" mode="aspectFill"></image>
									</view>
								</swiper-item>
							</swiper>
							<swiper-dot class="dot" :current="current" :list="roomBanners"></swiper-dot>
						</view>
						<!-- 图片轮播 E -->
						<view class="tp-pt20 tp-pb20 tp-ofh" :style="{height: showMoreOrderInfo?`${64* (skuList.length / 2) }rpx`:'128rpx'}">
							<view class="level_align tp-lh64 flex_wrap">
								<view class="level_align" style="width: 50%;" v-for="(item,index) in skuList" :key="index">
									<text class="tp-fc999" :class="{'tp-tr': index % 2 == 1}" :style="{width: index % 2 == 1? '180rpx' : 'auto'}">{{item.label}}：</text>
									<text>{{item.value}}</text>
								</view>
							</view>
						</view>
						<view class="" v-if="skuList.length > 4">
							<view class="center_combo tp-h88 tp-bdbm" @click="showMoreOrderInfo = !showMoreOrderInfo" v-if="!showMoreOrderInfo">
								<text class="tp-mr15">更多房型设施</text>
								<image class="tp-img28" src="../static/icon/more-shou.png" mode=""></image>
							</view>
							<view class="center_combo tp-h88 tp-bdbm" @click="showMoreOrderInfo = !showMoreOrderInfo" v-else>
								<text class="tp-mr15"> 收起更多设施</text>
								<image class="tp-img28" src="../static/icon/more-shou.png" mode=""></image>
							</view>
						</view>


						<view class="tp-mt30 tp-bdbm tp-pb30">
							<view class="tp-lh64 tp-fc333 tp-fz30 tp-fw600">
								房屋入住政策
							</view>
							<view class="tp-fz26 tp-fc333 tp-lh44">
								{{roomInfo.stayPolicy}}
							</view>
						</view>
						<view class="tp-mt30 tp-bdbm tp-pb30">
							<view class="tp-lh64 tp-fc333 tp-fz30 tp-fw600">
								优惠说明
							</view>
							<view class="tp-fz26 tp-fc333 tp-lh44">
								{{roomInfo.discountDesc}}
							</view>
						</view>
						<view class="tp-mt30  tp-pb30">
							<view class="tp-lh64 tp-fc333 tp-fz30 tp-fw600">
								费用明细
							</view>
							<view class="tp-pd30 tp-fz28 tp-fc333 tp-bbox tp-bcF5 tp-br12">
								<view class="level_align flex_between tp-lh64">
									<text>原价</text>
									<s>￥{{roomInfo.originalPrice}}</s>
								</view>
								<view class="level_align flex_between tp-lh64">
									<text>天天特价优惠</text>
									<s>￥{{roomInfo.discounts}}</s>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between">
					<view class="level_align">
						<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
						<text class="tp-fz36 tp-red">￥{{roomInfo.currentPrice}}</text>
					</view>
					<view class="level_align">
						<!-- <view class="level_align tp-mr30">
							<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
							<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
						</view> -->
						<view @click="handeSubmitOrder(roomInfo)" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
							预定
						</view>
					</view>
				</view>
			</view>

		</uni-popup>
		<!-- 房型弹窗 E -->

	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	import swiperDot from '@/components/swiperDot/swiperDot.vue';
	import calendar from '../../components/tp-calendar/util.js'
	export default {
		components: {
			swiperDot
		},
		data() {
			return {
				statusBarHeight: statusBarHeight, // 刘海的高度
				current: 0, // swiper
				id: '', // 酒店的id
				swpList: [], // 轮播
				// labelList: ['大床', '双床', '含早餐', '可取消', '可取消', '可取消', '可取消', '可取消'], // 房间标签  暂时不要
				roomList: [], // 房间列表
				lookRoom: {}, // 当前查看的房间
				evaluateLabelList: [], // 酒店评价标签列表
				evaluateList: [], // 酒店评价列表
				showMoreOrderInfo: false, //  是否查看更多支付明细

				info: {}, // 页面数据
				hotelCouponList: [], // 酒店优惠券列表
				roomInfo: {}, // 房间信息
				roomBanners: [], // 房间轮播
				skuList: [], // 房间规格属性列表
				choosedDateObj: {}, // 入住时间
				todayDay: '', // 今天的日期 2018-05-28
				tomorrowDay: '', // 明天的日期 2018-05-28
				severalDays: '', // 几天
				isRoutes: true, //  有上页 ，不是直接进的详情页
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.$store.commit('delHomeChoosedDateObj')
			this.getEvaluateLabelList();
			const curDay = calendar.getDateObj() // 当前日期
			this.todayDay = calendar.getBeforeDate(curDay.full, 0)
			this.tomorrowDay = calendar.getBeforeDate(curDay.full, 24)
			
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			if(routes.length == 1){
				this.isRoutes = false
				console.log(routes);
			}else{
				this.isRoutes = true
			}
		},
		onShow() {
			this.getPageInfo();
			this.getHotelCouponList();
			this.updateChoosedDate();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPageInfo();
			this.getHotelCouponList();
			this.updateChoosedDate();
		},
		// 分享
		onShareAppMessage(res) {
			return {
				title: '好物分享-' + this.info.hotelName,
				path: '/pagesSecond/hotel/hotelDetail?id=' + this.id,
				imageUrl: this.wwwImgUrl + this.info.hotelCover
			}
		},
		computed: {
			today() {
				if (this.todayDay) {
					const arr = this.todayDay.split('-')
					const y = arr[0]
					const m = arr[1].replace(/\b(0)/gi, '')
					const d = arr[2].replace(/\b(0)/gi, '')
					return m + '月' + d + '日'
				}
			},
			tomorrow() {
				if (this.tomorrowDay) {
					const arr = this.tomorrowDay.split('-')
					const y = arr[0]
					const m = arr[1].replace(/\b(0)/gi, '')
					const d = arr[2].replace(/\b(0)/gi, '')
					return m + '月' + d + '日'
				}
			},

		},
		methods: {
			// 计算天数
			computedSeveralDays() {
				let startDay = calendar.transdate(this.choosedDateObj.go_full || this.todayDay)
				let endDay = calendar.transdate((this.choosedDateObj.back_full && this.choosedDateObj.back_full) || this.tomorrowDay)
				this.severalDays = Math.ceil(((endDay - startDay) / 60 / 60 / 24 ))
				if( this.severalDays  == 0){
					this.severalDays = 1
				}
			},
			// 获取页面数据
			getPageInfo() {
				this.$http.get(this.$api.hotelDetail + '?hotelId=' + this.id).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.info = res.data
						res.data.roomList.map(item => {
							let arr = item.roomLabel
							let brr = [], str = '...';
							if( item.roomLabel.length > 4){
								for(let i = 0; i < 4; i++){
									brr.push(arr[i])
								}
								brr.push(str)
								item.roomLabel = brr
							}
						})
						this.roomList = res.data.roomList
						this.swpList = []
						res.data.hotelBanners.map(item => {
							this.swpList.push(this.$imgUrl + item)
						})
					}
				})
			},
			// 获取房间数据
			getRoomInfo(id) {
				this.$http.get(this.$api.hotelRoomDetail + '?roomId=' + id).then(res => {
					if (res.code === 200) {
						this.roomBanners = []
						res.data.roomBanners.map(item => {
						this.roomBanners.push(this.$imgUrl + item)
						})
						this.roomInfo = res.data
						this.skuList = res.data.skuList
					}
				})
			},
			// 获取酒店评价标签 和评价
			getEvaluateLabelList() {
				this.$http.get(this.$api.hotelEvaluateLabelList + '?hotelId=' + this.id).then(res => {
					if (res.code === 200) {
						this.evaluateLabelList = res.data
					}
				})
				this.$http.get(this.$api.hotelEvaluateList + '?hotelId=' + this.id + '&pageNum=1&pageSize=6').then(res => {
					if (res.code === 200) {

						res.data.result.map(item => {
							if(item.evaluationImg){
								item.imgsList = []
								let arr = item.evaluationImg.split(',')
								arr.map(it => {
									let src = this.$imgUrl + it
									item.imgsList.push(src)
								})
							}
							if(!item.customerAvatar.startsWith('http')){
								item.customerAvatar = this.$imgUrl + item.customerAvatar
							}
						})
						this.evaluateList = res.data.result
					}
				})
			},
			// 领取酒店优惠券
			takeCoupon(id) {
				this.$http.get(this.$api.takeHotelCoupon + '?hotelCouponId=' + id).then(res => {
					if (res.code === 200) {
						this.getHotelCouponList()
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						})
					}
				})
			},
			// 获取酒店优惠券列表
			getHotelCouponList() {
				this.$http.get(this.$api.hotelCouponList + '?hotelId=' + this.id).then(res => {
					if (res.code === 200) {
						this.hotelCouponList = res.data
					}
				})
			},
			// 收藏
			collect() {
				this.$http.get(this.$api.collectHotel + '?hotelId=' + this.id).then(res => {
					if (res.code === 200) {
						this.getPageInfo();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 点击下单
			handeSubmitOrder(item) {
				let src = item.roomLabel.join('-')
				let hotelInfo = {
					hotelId: this.id,
					hotelName: this.info.hotelName,
					roomId: item.id,
					startDay: this.choosedDateObj.go || this.today,
					beginTime: this.choosedDateObj.go_full || this.todayDay,
					endDay: this.choosedDateObj.back || this.tomorrow,
					endTime: this.choosedDateObj.back_full || this.tomorrowDay,
					severalDays: this.severalDays,
					roomLabel: src,
					currentPrice: item.currentPrice,
					inventory: item.inventory,
					maxJifen: item.maxJifen,
				}
				uni.navigateTo({
					url: './hotelOrder?info=' + JSON.stringify(hotelInfo)
				})
			},
			updateChoosedDate() {
				this.choosedDateObj = this.$store.getters.getHomeChoosedDateObj;
				let obj = this.$store.getters.getHomeChoosedDateObj;
				this.$set(this.choosedDateObj, 'go', obj.go);
				this.$set(this.choosedDateObj, 'back', obj.back);
				this.computedSeveralDays()
			},
			// 打开优惠券弹框
			openCoupon() {
				this.$refs.couponPopup.open()
			},
			// 关闭优惠券弹框
			closeCoupon() {
				this.$refs.couponPopup.close()
			},
			// 打开优惠说明弹框
			openPriceHint(item) {
				this.lookRoom = item
				this.$refs.priceHintPopup.open()
			},
			// 关闭优惠说明弹框
			closePriceHint() {
				this.$refs.priceHintPopup.close()
			},
			// 打开房间信息弹框
			openRoomPoupup(id) {
				this.getRoomInfo(id)
				this.$refs.roomPopup.open()
			},
			// 关闭房间信息弹框
			closeRoomPoupup() {
				this.$refs.roomPopup.close()
			},
			// swiper 切换
			change(e) {
				this.current = e.detail.current;
			},
			// 去地图
			goToMap() {
				const longitude = Number(this.info.hotelLongitude)
				const latitude = Number(this.info.hotelLatitude)
				uni.openLocation({
					longitude: longitude,
					latitude: latitude,
					name: this.info.hotelName,
					success: function() {
						console.log('success');
					}
				});
			},
			// 预览图片
			previewImg(url, arrlist) {
				console.log(url);
				// let arr = []
				// arrlist.forEach(item => {
				// 	arr.push(item.url)
				// })
				uni.previewImage({
					current: url,
					urls: arrlist,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nanbar-box {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 10;
	}

	.img_swiper_box {
		width: 750rpx;
		height: 414rpx;
		position: relative;
	}

	.dot {
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
	}

	.share-box {
		position: absolute;
		right: 40rpx;
		z-index: 10;

		.sharebutton {
			background: transparent;
			padding: 0;
			line-height: 40rpx;

			&::after {
				border: 0;
			}
		}
	}

	// 酒店信息
	.hotel-info {
		margin-top: -20rpx;
		border-radius: 20rpx 20rpx 0 0;

		.quan-tag {
			display: inline-block;
			padding: 0 10rpx;
			background: #FFF2F1;
		}
	}

	.room-info {
		.label-tag {
			display: inline-block;
			padding: 0 10rpx;
		}

		.room-img {
			width: 148rpx;
			height: 124rpx;
		}

		.ding {
			border: 2rpx solid #FF4A37;
			background: #FFF2F1;
		}
	}

	// 评价
	.evaluate-box {
		.imgs {
			width: 146rpx;
			height: 130rpx;
		}
	}

	// 弹框的叉号
	.close-icon {
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
	}

	.popup-coupon {
		border-radius: 20rpx 20rpx 0 0;

		.coupon-list {
			border-radius: 8rpx;
			background: #FFFAF7;

			.left-coupon {
				width: 200rpx;
				min-height: 190rpx;
				background: #FF660A;
				position: relative;
				padding: 10rpx;
				border-radius: 8rpx 0 0 8rpx;

				&::before {
					position: absolute;
					left: -15rpx;
					top: 50%;
					transform: translateY(-50%);
					content: "";
					width: 30rpx;
					height: 30rpx;
					border-radius: 20rpx;
					background: #fff;
				}
			}

			.watermark-img {
				position: absolute;
				top: 0;
				right: 0;
				width: 88rpx;
				height: 88rpx;
				z-index: 10;
			}
		}

		.scroll-Y {
			max-height: 70vh;
		}
	}
</style>
